<template>
  <div class="app-container">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="SKU" prop="skuId">
        <el-select v-model="formData.skuId" placeholder="请选择下拉选择SKU" clearable :style="{width: '100%'}" @change="changeSku">
          <el-option
            v-for="(item, index) in skuIdOptions"
            :key="index"
            :label="item.skuName"
            :value="item.id"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="转出仓库" prop="transferOutHouseId">
        <el-select v-model="formData.transferOutHouseId" placeholder="请选择转出仓库" clearable :style="{width: '100%'}">
          <el-option
            v-for="(item, index) in transferOutHouseIdOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="转入仓库" prop="transferInHouseId">
        <el-select v-model="formData.transferInHouseId" placeholder="请选择转入仓库" clearable :style="{width: '100%'}">
          <el-option
            v-for="(item, index) in transferInHouseIdOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="批次号" prop="batchNo">
        <el-input v-model="formData.batchNo" placeholder="请输入批次号" clearable :style="{width: '100%'}" />
      </el-form-item>
      <el-form-item label="入库数量" prop="count">
        <el-input-number v-model="formData.count" placeholder="入库数量" :step='1' @change="countChange" :min="0"></el-input-number>
      </el-form-item>
      <p v-for="(bar,i) in formData.barCodeModes" :key="i">
        <el-form-item prop="barcode">
          <el-input v-model="bar.barcode" placeholder="请输入条码" clearable :style="{width: '100%'}" />
        </el-form-item>
      </p>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { assetTransfer } from '@/api/asset/asset'
import { getSkusByCondition } from '@/api/asset/objectSku'
import { getAllWarehouse } from '@/api/asset/warehouse'

export default {
  components: {},
  inheritAttrs: false,
  props: [],
  data() {
    return {
      formData: {
        skuId: undefined,
        transferOutHouseId: undefined,
        transferInHouseId: undefined,
        batchNo: undefined,
        uniqueCodes: [],
        barCodeModes: [],
        count: undefined
      },
      uniqueFlag: '',
      rules: {
        skuId: [{
          required: true,
          message: '请选择下拉选择SKU',
          trigger: 'change'
        }],
        transferOutHouseId: [{
          required: true,
          message: '请选择转出仓库',
          trigger: 'change'
        }],
        transferInHouseId: [{
          required: true,
          message: '请选择转入仓库',
          trigger: 'change'
        }],
        batchNo: [{
          required: true,
          message: '请输入批次号',
          trigger: 'blur'
        }]
      },
      skuIdOptions: [],
      transferOutHouseIdOptions: [],
      transferInHouseIdOptions: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const req = { 'name': '' }
      getSkusByCondition(req).then(response => {
        this.skuIdOptions = response.result
      })
      getAllWarehouse().then(response => {
        this.transferOutHouseIdOptions = response.result
        this.transferInHouseIdOptions = response.result
      })
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.formData.uniqueCodes = []
        for (let i = 0; i < this.formData.barCodeModes.length; i++) {
          this.formData.uniqueCodes.push(this.formData.barCodeModes[i].barcode)
        }
        assetTransfer(JSON.stringify(this.formData)).then(response => {
          this.$message.success({
            type: 'success',
            message: '添加成功'
          })
          this.resetForm()
        })
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    countChange(cur, old) {
      this.formData.barCodeModes = []
      if (this.uniqueFlag === 1) {
        for (let i = 0; i < cur; i++) {
          this.formData.barCodeModes.push({ 'barcode': '' })
        }
      }
    },
    changeSku() {
      if (this.formData.skuId) {
        const items = this.skuIdOptions.filter(el => (el.id === this.formData.skuId))
        this.uniqueFlag = items[0].uniqueFlag
      }
    }
  }
}
</script>
